<template>
  <div>
    <h1>App</h1>

    <button @click="showModal = true">Open</button>

    <!-- 
      :show="showModal" @update:show="showModal = $event"

      Vue3:   v-model:show="showModal"
      Vue2:   :show.sync="showModal"
     -->
    <!-- <MyModal :show.sync="showModal" title="Hello"></MyModal> -->

    <MyModal :show.sync="showModal">
      <template v-slot:header>
        <p>我是自定义的 header 内容</p>
        <button @click="showModal = false">关闭</button>
      </template>

      <template #body>
        <p>我是自定义的 body 内容</p>
      </template>
    </MyModal>
  </div>
</template>

<script>
import MyModal from "./components/MyModal.vue";

export default {
  components: {
    MyModal,
  },

  data() {
    return {
      showModal: false,
    };
  },
};
</script>
